<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>个人中心</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <script src="js/rem.js"></script>
    <script src="js/jquery.min.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="css/base.css"/>
    <link rel="stylesheet" type="text/css" href="css/page.css"/>
    <link rel="stylesheet" type="text/css" href="css/all.css"/>
    <link rel="stylesheet" type="text/css" href="css/mui.min.css"/>
    <link rel="stylesheet" type="text/css" href="css/loaders.min.css"/>
	<link rel="stylesheet" type="text/css" href="iconfont/iconfont.css"/>
	<!--使用elementui 必须引入vue-->
	<script type="text/javascript" src="https://lib.baomitu.com/vue/2.6.12/vue.min.js"></script>
	<!-- ele引入样式 -->
	<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
	<!-- ele引入组件库 -->
	<script src="https://unpkg.com/element-ui/lib/index.js"></script>
	<!--axios-->
	<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

</head>
	<body>
	<style>
		.el-message{
			top: 70px !important;
		}
	</style>
		<!--header star-->
		<header class="mui-bar mui-bar1 mui-bar-nav mui-bar-nav1" id="header">
			<a class="back-btn" href="javascript:history.go(-1)">
	            <i class="iconfont icon-fanhui"></i>
	        </a>
	       <div class="mui-title">个人中心</div>
	    </header>
	    <!--header end-->
	    <div class="warp clearfloat" id="app">
	    	<div class="h-top clearfloat box-s">
				<div class="ge-back"><img src="img/text-bck.png" ></div>
				<div class="mui-tus">
					<div class="huiyuan-text">
						<img src="img/touxiang.png"/>
					 	<div v-if="currUser.name!=null" class="content clearfloat">
							<p class="hname">{{currUser.name}}</p>
							<!--<p class="hpthy">普通管理员</p>-->
						</div>
						<a v-else class="content clearfloat" style="font-size: 0.5rem; color: #fff;display: block;" href="login.html">
							登录/注册
						</a>
					</div>

					<ul>
						<li>
							<a href="../home/index.html">
								<span>商城首页</span>
								<p>GO!</p>
							</a>
						</li>
						<span class="right-lines"></span>
						<li>
							<a href="#">
								<span>我的订单</span>
								<p>4789</p>
							</a>
						</li>
						<span class="right-lines"></span>
						<li>
							<a href="#">
								<span>注册时间</span>
								<p>{{currUser.register}}</p>
							</a>
						</li>
					</ul>

				</div>
	    	</div>

			<!--<div class="swiper-text clearfloat">
				<span class="fl vip-span">
					<svg class="icon vip-s" aria-hidden="true">
					  <use xlink:href="#icon-94"></use>
					</svg>
					邀好友，赚爱豆
					</span>
				<a class="fr vip-kai" href="#">前往</a>
			</div>-->
			<!--<div class="four-text clearfloat">
				<ul class="four-ul">
					<li style="background: linear-gradient(to left bottom, rgba(82, 86, 255, 0.5), rgba(82, 86, 255, 0.9));margin-right: 0.35rem;">
						<div class="back-text">
							<div class="box-text">
								<i class="iconfont zise icon-4"></i>
								<p>店铺管理</p>
							</div>
							<div class="box-text_2">
								<p>已经有店铺数</p>
								<p>10</p>
							</div>
						</div>
					</li>
					<li style="background: linear-gradient(to left bottom, rgba(254, 81, 150, 0.5), rgba(254, 81, 150, 0.9));">
						<div class="back-text">
							<div class="box-text">
								<i class="iconfont hongse icon-08_zizhanghaoguanli"></i>
								<p>子账号</p>
							</div>
							<div class="box-text_2">
								<p>已经有个数</p>
								<p>10</p>
							</div>
						</div>
					</li>

				</ul>
				<ul>
					<li style="background: linear-gradient(to left bottom, rgba(255, 177, 153, 0.5), rgba(255, 177, 153, 0.9)); margin-right: 0.35rem;">
					<div class="back-text">
						<div class="box-text">
							<i class="iconfont fense icon-zhanghuguanli"></i>
							<p>账户管理</p>
						</div>
						<div class="box-text_2">
							<p>账户余额</p>
							<p>10</p>
						</div>
					</div>
					</li>
					<li style="background: linear-gradient(to left bottom, rgba(0, 114, 255, 0.5), rgba(0, 114, 255, 0.9));">
						<div class="back-text">
							<div class="box-text">
								<i class="iconfont lanse icon-youhuiquan"></i>
								<p>爱豆</p>
							</div>
							<div class="aidou-text">
								<div class="box-text_2">
									<p>我的爱豆</p>
									<p>10</p>
								</div>
								<div class="box-text_2">
									<p>最新到账</p>
									<p>10</p>
								</div>
							</div>

						</div>
					</li>
				</ul>
			</div>-->
	    	<div class="cashlist clearfloat">
	    		<ul>
	    			<li class="box-s">
						<a href="#" @click="dialogFormVisible = true ; editUser()">
							<p><i class="iconfont icon-zhanghao"></i>账号管理</p>
							<i class="iconfont icon-jiantou1"></i>

						</a>
	    			</li>
					<li class="box-s">
						<a href="#" @click="dialogAdressVisible = true">
							<p><i class="iconfont icon-tubiao201"></i>收货地址</p>
							<i class="iconfont icon-jiantou1"></i>
						</a>
					</li>
					<!--<li class="box-s">
						<a href="#">
							<p><i class="iconfont icon-zhanghao"></i>用户管理</p>
							<i class="iconfont icon-jiantou1"></i>
						</a>
					</li>
	    			<li class="box-s">
	    				<a href="#">
	    					<p><i class="iconfont icon-dailizhanghaoguanli"></i>代理名单</p>
	    					<i class="iconfont icon-jiantou1"></i>
	    				</a>
	    			</li>
					<li class="box-s">
						<a href="#">
							<p><i class="iconfont icon-dailizhanghaoguanli"></i>代理IP</p>
							<i class="iconfont icon-jiantou1"></i>
						</a>
					</li>
					<li class="box-s">
						<a href="#">
							<p><i class="iconfont icon-neirongziduanguanli"></i>内容管理</p>
							<i class="iconfont icon-jiantou1"></i>
						</a>
					</li>
	    			<li class="box-s">
	    				<a href="#">
	    					<p><i class="iconfont icon-dianpu"></i>店铺管理</p>
	    					<i class="iconfont icon-jiantou1"></i>
	    				</a>
	    			</li>
					<li class="box-s">
						<a href="#">
							<p><i class="iconfont icon-zizhanghaoguanli"></i>子账号管理</p>
							<i class="iconfont icon-jiantou1"></i>
						</a>
					</li>-->
	    		</ul>
	    	</div>
	    	<a href="login.html" class="center-btn db ra3">退出登录</a>

			<!--编辑用户信息的窗口-->
			<el-dialog title="编辑用户信息" :visible.sync="dialogFormVisible"  width="100%">
				<el-form :model="userform" :rules="rules" ref="userform">
					<el-form-item label="用户名称" :label-width="formLabelWidth" prop="name">
						<el-input v-model="userform.name" autocomplete="off"></el-input>
					</el-form-item>
					<!--prop 匹配 表单rows字段-->
					<el-form-item label="用户密码" :label-width="formLabelWidth" prop="password">
						<el-input v-model="userform.password" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="用户电话" :label-width="formLabelWidth" prop="phone">
						<el-input v-model="userform.phone" autocomplete="off"></el-input>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="dialogFormVisible = false">取 消</el-button>
					<el-button type="primary" @click="submitForm('userform')">确 定
					</el-button>
				</div>
			</el-dialog>

			<!--编辑用户收货地址的窗口-->
			<el-dialog title="编辑用户收货地址" :visible.sync="dialogAdressVisible"  width="100%">
				<el-input v-model="rePhone" placeholder="请输入用户的联系电话"></el-input>
					<!--<label>省市信息：</label>-->
				<el-cascader :options="address" v-model="ProvinCity" clearable placeholder="请选择省市"></el-cascader>
				<el-input v-model="street" placeholder="请输入街道详细地址"></el-input>
				<div slot="footer" class="dialog-footer">
					<el-button @click="dialogAdressVisible = false">取 消</el-button>
					<el-button type="primary" @click="saveReceiver() ; dialogAdressVisible = false">确 定
					</el-button>
				</div>
			</el-dialog>

	    </div>

		<script type="text/javascript" src="js/city.js" ></script>
		<script type="text/javascript">

			var v = new Vue({
                el:"#app",
                data:{
                	//收货信息
					ProvinCity:[],
					street:'',
					address:cityData,
					rePhone:'',

					//用户信息
					currUser: {},
					userform: {
						uId:0,
						name: '',
						password: '',
						role:'',
						phone:'',
					},
					dialogFormVisible: false,
					dialogAdressVisible: false,
					//校验规则
					rules: {
						//blur -- 失焦
						name: [
							{required: true, message: '请输入用户名称', trigger: 'blur'},
							{min: 2, max: 5, message: '长度在 1 到 5 个字符', trigger: 'blur'}
						],
						password: [
							{required: true, message: '请输入用户密码', trigger: 'blur'},
							{min: 1, max: 16, message: '长度在 1 到 16 个字符', trigger: 'blur'}],
					},
					formLabelWidth: '100px',
				},
                created(){
					console.info(cityData);
                    axios.get("http://127.0.0.1:8001/user/userInfo").then(res=>{
                       	this.currUser = res.data;
                    })
                },
				methods:{
					editUser(){
						this.userform.name = this.currUser.name;
						this.userform.password = this.currUser.password;
						this.userform.phone = this.currUser.phone;
					},
					submitForm(formName) {
						this.$refs[formName].validate((valid) => {
							if (valid) {
								axios.post
								("http://127.0.0.1:8001/user/saveUserModify", {
									// params
									id : this.currUser.id,
									name: this.userform.name,
									password : this.userform.password,
									role : this.currUser.role,
									phone : this.userform.phone
								}).then((res) => {
									this.$message(res.data);
									console.info(res.data);
									this.currUser.name = this.currUser.name;
								});

								this.dialogFormVisible = false ;
							} else {
								this.$message({
									showClose: true,
									message: '输入有误',
									type: 'error'
								});
								return false;
							}
						});
					},
					saveReceiver(){
						if(this.rePhone==null||this.rePhone==''){
							//this.$message.error('联系方式输入错误！');
							this.$message({
								message: '联系方式输入错误',
								center: true,
								type: 'error',
							});
							return;
						}else if(this.ProvinCity.length===0){
							this.$message.error('省市信息输入错误！');
							return;
						}else if(this.street==null||this.street=='') {
							this.$message.error('详细地址输入错误！');
							return;
						}
						axios.post
						("http://127.0.0.1:8001/receiver/saveRece", {
							// params
							userName: this.currUser.name,
							phone:this.rePhone,
							citys:this.ProvinCity,
							address:this.street

						}).then((res) => {
							this.$message(res.data);
							console.info(res.data);

						});
					}
				}
            })
		</script>
		<script type="text/javascript" src="js/jquery-1.8.3.min.js" ></script>
		<script src="js/mui.min.js"></script>
		<script type="text/javascript" src="js/hmt.js" ></script>
		<!--<script src="iconfont/iconfont.js"></script>-->

	</body>

</html>
